<%@ page contentType="text/html; charset=UTF-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>chronoline/jquery.qtip.min.css" />
    <script type="text/javascript" src="<%=basePath%>chronoline/jquery.qtip.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>chronoline/raphael-min.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>chronoline/chronoline.css" />
    <script type="text/javascript" src="<%=basePath%>chronoline/chronoline.js"></script>
		<!-- <div class="main-content"> -->
		<div id="main-content-footer-main">
			 <h2>Today</h2>
		     <div id="target2" class="timeline-tgt"></div>            
		</div>
    
    <script type="text/javascript">
      $(document).ready(function(){
      var events = [
      {dates: [new Date(2011, 2, 31)], title: "2011 Season Opener", section: 0},
      {dates: [new Date(2012, 1, 29)], title: "Spring Training Begins", section: 2},
      {dates: [new Date(2012, 3, 5)], title: "Atlanta Braves @ New York Mets Game 1", section: 1},
      {dates: [new Date(2012, 3, 7)], title: "Atlanta Braves @ New York Mets Game 2", section: 1},
      {dates: [new Date(2012, 3, 8)], title: "Atlanta Braves @ New York Mets Game 3", section: 1},
      {dates: [new Date(2012, 3, 9), new Date(2012, 3, 11)], title: "Atlanta Braves @ Houston Astros", section: 1},
      {dates: [new Date(2012, 3, 13), new Date(2012, 3, 15)], title: "Milwaukee Brewers @ Atlanta Braves", section: 1},
      {dates: [new Date(2012, 3, 9), new Date(2012, 3, 11)], title: "Boston Red Sox @ Toronto Blue Jays", section: 1},
      {dates: [new Date(2012, 3, 13), new Date(2012, 3, 15)], title: "Baltimore Orioles @ Toronto Blue Jays", section: 1},
      {dates: [new Date(2012, 3, 17), new Date(2012, 3, 19)], title: "Tampa Bay Rays @ Toronto Blue Jays", section: 1},
      {dates: [new Date(2012, 3, 20), new Date(2012, 3, 23)], title: "Toronto Blue Jays @ Kansas City Royals", section: 1},
      {dates: [new Date(2012, 3, 5)], title: "Opening Day for 12 Teams", section: 1},
      {dates: [new Date(2012, 2, 28)], title: "Seattle Mariners v. Oakland A's", section: 1, description: "Played in Japan!"},
      {dates: [new Date(2012, 4, 18), new Date(2012, 5, 24)], title: "Interleague Play", section: 1},
      {dates: [new Date(2012, 5, 10)], title: "All-Star Game", section: 1},
      {dates: [new Date(2012, 9, 24)], title: "World Series Begins", section: 3}
      ];
      var sections2 = [
      {dates: [new Date(2011, 2, 31), new Date(2011, 9, 28)], title: "2011 MLB Season", section: 0, attrs: {fill: "##e3f0fe"}},
      {dates: [new Date(2012, 2, 28), new Date(2012, 9, 3)], title: "2012 MLB Regular Season", section: 1, attrs: {fill: "#e3f0fe"}},
      {dates: [new Date(2012, 1, 29), new Date(2012, 3, 4)], title: "Spring Training", section: 2, attrs: {fill: "#cce5ff"}},
      {dates: [new Date(2012, 9, 4), new Date(2012, 9, 31)], title: "2012 MLB Playoffs", section: 3, attrs: {fill: "#cce5ff"}}
      ];
      var timeline2 = new Chronoline(document.getElementById("target2"), events,
        {visibleSpan: DAY_IN_MILLISECONDS * 91,
         animated: true,
         tooltips: true,
         defaultStartDate: new Date(2012, 3, 5),
         sections: sections2,
         sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'},
	      labelInterval: isFifthDay,
	      hashInterval: isFifthDay,
	      scrollLeft: prevMonth,
	      scrollRight: nextMonth,
	      markToday: 'labelBox',
	      draggable: true
      });
      });
    </script>
		